<template>
    <div class="navigatorWrapper shadow  bg-white rounded">
        <nav class="navigator">
            <span v-if="info.nickName != '' "  
            @click="goUserinfo"  
            class="nitem mr-3" v-text="info.nickName"></span>
           <div @click="goUserinfo" class="userSimple nitem">
               <div v-if=" info.default " class="defaulAvatar">
                   <!-- <svg class="icon" aria-hidden="true">
                    <use xlink:href="#iconjiandao"></use>
                    </svg> -->
                    <span class="default-avatar default-avatar-icon iconfont"></span>
               </div>
               <div v-else class="avatar defaulAvatar">
                   <img :src="info.avatar" alt="">
               </div>
           </div>
           <span
           class="nitem middle-height  shadow  bg-white rounded"
           @click="goUserinfo"
           >设置</span>
           <span
           class="nitem middle-height  shadow  bg-white rounded"
           @click="openDialogue({
                content:'确定现在退出吗？',
                fnArr:[
                {
                    title: '取消',
                    fn: closeDialogue
                },
                {
                    title: '确定',
                    fn: logout
                }
                ]
            })"
           >安全退出</span>
       </nav>
        <!-- 消息提示 -->
        <transition
        :duration="{ enter: 1000, leave: 1000 }"
        enter-active-class="animate__animated animate__jackInTheBox"
        leave-active-class="animate__animated animate__fadeOut">
            <msg-toast
            v-if="msg.show"
            :from="msg.from"
            :content="msg.content"
            :opr="msg.opr"
            :loading="msg.loading"
            ></msg-toast>
        </transition>
    </div>
</template>

<script>
import { getUserInfo , userLogout } from "../../../api/interface/users.js";
import { freshToken } from "../../../api/interface/token.js"; //重新请求token
import msgToast from '../informationToast/infoToast.vue'; 

export default {
    components:{
        msgToast
    },
    inject:["featurePage"],
    data(){
        return {
            info:{
                nickName: "",
                avatar: "",
                default: true
            },
            msg:{
                show: false,
                from:"",
                content:"",
                opr:[],
                loading:false
            }

        }
    },
    watch:{
        
    },
    methods:{
        //用户设置页面
        goUserinfo(){
            // this.$router.replace("/func/userinfo");
            this.$router.push( "/func/userinfo" );
        },
         //获取用户信息
        getUserInformation(){
            let that = this;
            getUserInfo().then( res=>{
                console.log("获取用户信息： ", res);

                //判断是否需要缓存用户信息
                //判断用户信息是否有变化

                // 存储用户信息
                this.$store.commit("setUserInfo" , res.data.data);
                this.info.avatar = res.data.data.headerImg;
                this.info.nickName = res.data.data.epithet ? res.data.data.epithet : "" ;

                //将头像,昵称 放在本地缓存
                if( window ){
                    window.localStorage.setItem("my_avatar", this.info.avatar );
                    window.localStorage.setItem("my_nick_name", this.info.nickName );
                }

                if( this.info.avatar ){
                    this.info.default = false; //显示自定义头像
                }

            }).catch(err=>{
                console.log("获取用户信息err： ", err);
                this.$httpError.checkResStatus(err.data,function(){
                    //重新请求生成token
                    freshToken().then(res=>{
                        localStorage.setItem("token", res.data.data.token);
                        that.getUserInformation( );
                    })
                },that)

            });
        },
        //检查本地缓存有用户头像，有则设置头像
        checkLocalstorageAvatar(){
            if( !window ) return;
            let avatar = window.localStorage.getItem("my_avatar");
            if( !avatar ){
                this.info.default = true;
                return;
            } 
            this.info.default = false;
        },
        //检查本地缓存用户昵称
        checkLocalstorageNickName(){
            let nickName = window.localStorage.getItem("my_nick_name");
            if( !nickName )  return ;
            this.info.nickName = nickName;
        },
        //安全退出
        logout(){
            let that = this;
            this.controlLoading();
            userLogout().then(
                res=>{
                    console.log("安全退出：", res);
                    this.controlLoading();
                    this.setAjaxReturnMsg( res.data.msg );

                }
            ).catch(
                err=>{
                    this.$httpError.checkResStatus(err.data,function(){
                        //重新请求生成token
                        freshToken().then(res=>{
                            localStorage.setItem("token", res.data.data.token);
                            that.logout( );
                        })
                    },that)
                }
            );
        },
        //打开消息对话
        openDialogue({ content , fnArr }){
            console.log("test");
            this.msg.from = this;
            let btn = [];
            btn = btn.concat(fnArr);
            this.msg.opr = btn;
            this.msg.content = content;

            this.msg.show = true;
        },
        //控制加载标识
        controlLoading( ){
            this.msg.loading = !this.msg.loading;
        },
                //控制回现信息
        setAjaxReturnMsg( content ){
            let that = this;
            this.resetMsgDialogue();
            this.msg.content = content;
            this.msg.opr.length = 0;
            this.msg.opr.push({
                title: "确定",
                fn: that.exitOff
            });
        },
        exitOff(){
            this.closeDialogue();
            //返回首页
            this.$router.replace('/');
        },
        //重置消息
        resetMsgDialogue(){
            this.msg.opr = [];
            this.msg.content = "";
            this.msg.loading = false;
        },
        //关闭对话
        closeDialogue(){
            this.resetMsgDialogue();
            this.msg.show = false;
        },
    },
    beforeMount() {
        
        //检查头像数据
        this.checkLocalstorageAvatar();
        //检查昵称
        this.checkLocalstorageNickName();
    },
    mounted() {
         
    },
    activated() {
        
        this.getUserInformation();
    },
}
</script>

<style lang="scss">
.navigatorWrapper{
    padding: .8rem 0;
    .navigator{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .nitem{
            margin: 0 .3rem;
        }
    }
}
.defaulAvatar{
    border: 1px solid grey;
    border-radius: 50%;
    width: 3em;
    height: 3em;
    overflow: hidden;
}

.avatar{
    width: 3em;
    height: 3em;
    overflow: hidden;
    img{
        display: inline-block;
        width: 100%;
        height: 100%;
    }
}

//symbol icon generic style
// .icon {
// width: 2.6em;
// height: 2.6em;
// line-height: 2.6em;
// fill: currentColor;
// overflow: hidden;
// }

.middle-height{
    font-size: 1em;
    line-height: 1em;
    display: inline !important;
    vertical-align: -100px;
}
</style>